<template>
  <div>
    <div style="" class="app">
      <hear></hear>
      <BDhear :num="8"></BDhear>
      <!-- <div class="app-h">投保申请</div> -->
      <div class="app-xt">
        <div class="app-b">
          <div class="b-bbc">
            <div class="text item">
              <!-- <img
              src="../../../src/assets/imges/shen.png"
              class="a-img"
              alt=""
            /> -->
            </div>

            <!-- <a download="" href="http://192.168.0.28:8082/uploads/bhfiles/20220818/BH_202208181660826053.pdf">1234567</a> -->
            <div v-if="xianshi" class="public-kuang">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="kuang-txt">
                  <img
                    src="../../../src/assets/imges/pdf.png"
                    alt=""
                    class="pdf"
                    srcset=""
                  />
                  <div class="kuang-1">反担保协议</div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div class="kuang-2" @click="yxiazai">预览</div>
                  <div
                    style="margin-left: 10px"
                    class="kuang-2"
                    @click="xiazai"
                  >
                    下载
                  </div>
                </div>
              </div>
              <div style="margin-top: 40px">
                <div>
                  保函文件：{{
                    wenname.fandbfile == null ? "未获取" : wenname.dbfile
                  }}
                </div>

                <div style="margin-top: 10px">
                  下载地址：{{
                    wenname.fandbfile == null
                      ? "未获取"
                      : epath + wenname.fandbfile
                  }}
                </div>
                <div></div>
              </div>
            </div>
            <div v-if="xianshi" class="public-kuang">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="kuang-txt">
                  <img
                    src="../../../src/assets/imges/pdf.png"
                    alt=""
                    class="pdf"
                    srcset=""
                  />
                  <div class="kuang-1">担保协议</div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div class="kuang-2" @click="yxiazai">预览</div>
                  <div
                    style="margin-left: 10px"
                    class="kuang-2"
                    @click="xiazai"
                  >
                    下载
                  </div>
                </div>
              </div>
              <div style="margin-top: 40px">
                <div>
                  保函文件：{{
                    wenname.dbfile == null ? "未获取" : wenname.dbfile
                  }}
                </div>

                <div style="margin-top: 10px">
                  下载地址：{{
                    wenname.dbfile == null ? "未获取" : epath + wenname.dbfile
                  }}
                </div>
                <div></div>
              </div>
            </div>
            <div v-if="xianshi2" class="public-kuang">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="kuang-txt">
                  <img
                    src="../../../src/assets/imges/pdf.png"
                    alt=""
                    class="pdf"
                    srcset=""
                  />
                  <div class="kuang-1">密文保函</div>
                </div>
                <div class="kuaqu" v-if="!mingwen">{{ baskdj }}</div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <!-- <div v-if="smingwen" class="kuang-2" @click="yhuoqu">
                    预览
                  </div>
                  <div
                    style="margin-left: 10px"
                    v-if="mingwen"
                    class="kuang-2"
                    @click="huoqu"
                  >
                    {{ namses }}
                  </div> -->
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <div class="kuang-2" @click="yxiazai">预览</div>
                    <div
                      style="margin-left: 10px"
                      class="kuang-2"
                      @click="xiazai"
                    >
                      下载
                    </div>
                  </div>
                </div>

                <div v-if="!mingwen" class="kuang-2">
                  <img
                    src="../../../src/assets/imges/jiazai.gif"
                    class="imgasd"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div style="margin-top: 20px">
                <div>
                  保函文件：{{
                    wenname.mingwenfile == null ? "未获取" : wenname.mingwenfile
                  }}
                </div>

                <div style="margin-top: 10px">
                  下载地址：{{
                    wenname.mingwenfile == null ? "未获取" : wenname.mingwenfile
                  }}
                </div>
                <div></div>
              </div>
            </div>

            <div v-if="dians">
              <img
                src="../../../src/assets/imges/baohanwen.png"
                class="public-ku"
                alt=""
                srcset=""
              />
            </div>
            <!-- <div v-if="tishi" class="text item itm">流程申请中，请耐心等待</div> -->
          </div>
          <!-- </el-card> -->
        </div>
      </div>

      <transition name="el-fade-in-linear"> </transition>
      <div
        v-if="!dians"
        style="justify-content: center; flex-direction: inherit"
        class="butt butt-2"
      >
        <div v-if="dian" @click="myinvoice" class="button-ii">去发快递</div>
        <!-- <div v-else @click="myinvoices"  class="button-ii">下载开票</div> -->
        <el-button v-else type="primary" class="button-ii" disabled>{{
          tongbus
        }}</el-button>
        <div
          style="margin-left: 40px"
          @click="$router.push('/')"
          class="button-ii"
        >
          返回首页
        </div>
      </div>

      <div class="butt butt-1">
        <el-button v-if="huanyaun" @click="Hybao" type="info" class="butt-ii">
          还原保函</el-button
        >
      </div>
    </div>
    <!-- <el-button
    type="primary"
    @click="openFullScreen2">
    服务方式
  </el-button> -->
  </div>
</template>

<script>
// import hear from ".././../components/hear.vue";
import BDhear from "./BDhear.vue";
import axios from "axios";
import { snfiledown } from "@/api/xin";
export default {
  components: {
    // hear,
    BDhear,
  },
  name: "Public",
  data() {
    return {
      input: {
        name: "",
        names: "",
        kai: "",
      },
      tabPosition: "right",
      tab: "left",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      baohanno: "TBaoHanXDCS2022071818473558051",
      dian: true,
      dians: false,
      surbing: "../../../src/assets/imges/baohanwen.png",
      huany: false,
      tishi: false,
      xianshi: false,
      huanys: false,
      huanyaun: false,
      yi: true,
      kai: true,
      ban: true,
      bai: true,
      quan: false,
      erci: false,
      duan: "- - - - -",
      duanl: "———",
      active: 0,
      bankaccount: "",
      tong: true,
      tongbus: "申请中...",
      tabPosition: "right",
      tab: "left",

      dialogImageUrl: "",
      cion: "",
      dialogVisible: false,
      unify_code: "",
      billstatus: "",
      ztype: "",
      filepath: "文件生成中", //密文
      mfilepath: "文件生成中", //明文
      epath: "http://192.168.0.28:8082",
      xianshi2: true,
      applyno: "",
      namses: "获取",
      panduan: "",
      mfile: "",
      // wenname: "未获取",
      mwenname: "文件生成中",
      timer: null, // 定时器名称
      timers: null, // 定时器名称
      mingwen: true,
      baskdj: "生成保函模板中...",
      smingwen: false,
      message: "132",
      wenname: {},
      loading: "",
    };
  },
  created() {
    var that = this;
    this.createds();
    this.openFullScreen2();
    return;
    axios({
      url: "http://192.168.0.28:8082/mobile/agent/baohan/bhinfo",
      method: "post", // params: '必须是一个无格式对象 query参数',
      data: {
        guarantee_apply_id: sessionStorage.getItem("guarantee_apply_id"),
      },
      timeout: 1000,
      headers: {
        token: sessionStorage.getItem("token"),
      },
    })
      .then((res) => {
        console.log(res.data);
        this.wenname = res.data.data;
        if (res.data.code == 1) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });

          // this.$router.push("/BidSecurity/ElectronicProtocol");
        } else {
          this.$message.error(res.data.mag);
        }
        // this.$router.push("/BidSecurity/Bidpayment");
      })
      .catch((err) => {
        console.log("失败", err);
        // this.$notify.error({
        //   message: err.response.data.msg,
        // });
      });
  },
  beforeDestroy() {},
  methods: {
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        text: "文件生成中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // setTimeout(() => {

      // }, 2000);
    },
    inde3() {
      var that = this;
      var cion = 1;
      if (sessionStorage.getItem("bhlein") == "质量保函") {
        cion = 1;
      }
      axios({
        url: "http://192.168.0.28:8082/bhfile/getfile",
        // url: "http://192.168.0.28:8082/handle/baohan/getbhfile",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          applyNumber: sessionStorage.getItem("apply_number"),
          // type: cion,
          gtype: sessionStorage.getItem("nametype"),
        },
        timeout: 10000,
        headers: {
          // token: sessionStorage.getItem("token"),
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            setTimeout(function () {
              that.inde4();
            }, 3000);
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.mag);
            this.loading.close();
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err);
          this.loading.close();
          this.$notify.error({
            message: err.response.data.msg,
          });
        });
    },
    inde2() {
      var that = this;
      console.log(sessionStorage.getItem("bhlein"), "投标保函");
      setTimeout(function () {
        that.inde3();
      }, 3000);
      if (sessionStorage.getItem("bhlein") == "投标保函") {
        return;
        axios({
          url: "http://192.168.0.28:8082/mobile/agent/baohan/getbhfile",
          method: "post", // params: '必须是一个无格式对象 query参数',
          data: {
            apply_number: sessionStorage.getItem("apply_number"),
            type: 2,
          },
          timeout: 1000,
          headers: {
            // token: sessionStorage.getItem("token"),
            Authorization: "Bearer " + sessionStorage.getItem("token"),
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              // this.$router.push("/BidSecurity/ElectronicProtocol");
            } else {
              this.$message.error(res.data.msg);
            }
            // this.$router.push("/BidSecurity/Bidpayment");
          })
          .catch((err) => {
            console.log("失败", err.response.data);
            this.$notify.error({
              message: err.response.data.msg,
            });
          });
      }
    },
    inde1() {
      var that = this;
      axios({
        url: "http://192.168.0.28:8082/QBaoHan/createcontract",
        // url: "http://192.168.0.28:8082/systems/applications/preview",
        // url: "http://192.168.0.28:8082/systems/applications/bhfilesCreate",
        // url: "http://192.168.0.28:8082/QBaoHan/filesign",
        // url: "http://192.168.0.28:8082/handle/baohan/bhfiles_create",
        method: "get", // params: '必须是一个无格式对象 query参数',
        params: {
          applyNumber: sessionStorage.getItem("apply_number"),
          // type: "pdf",
          gtype: sessionStorage.getItem("nametype"),
        },
        // timeout: 10000,
        headers: {
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log(res.data.msg);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            setTimeout(function () {
              that.inde2();
            }, 3000);
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.mag);
            this.loading.close();
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("bhfiles_create失败", err);
          this.loading.close();
          // this.$notify.error({
          //   message: err.response.data.msg,
          // });
        });
    },
    inde4() {
      axios({
        url: "http://192.168.0.28:8082/systems/applications/bhfilesinfo",
        // url: "http://192.168.0.28:8082/handle/baohan/bhfiles_info",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          applyNumber: sessionStorage.getItem("apply_number"),
        },
        // timeout: 1000,
        headers: {
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log(res.data);
          this.wenname = res.data.data;
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.loading.close();
            //  this.createds();
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.mag);
            this.loading.close();
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("bhfiles_info失败", err);
          this.loading.close();
          this.$notify.error({
            message: err.response.data.msg,
          });
        });
      axios({
        url: "http://192.168.0.28:8082/mobile/agent/baohan/kuaidi_send",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          address_id: 6,
          guarantee_apply_id: sessionStorage.getItem("guarantee_apply_id"),
          sendcode: "123123",
          sendkuaidi: "123123123",
        },
        timeout: 1000,
        headers: {
          // token: sessionStorage.getItem("token"),
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.msg);
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err.response.data);
          this.$notify.error({
            message: err.response.data.msg,
          });
        });
    },
    createds() {
      console.log(123);
      var that = this;
      setTimeout(function () {
        that.inde1();
      }, 3000);
      return;

      // this.applyno = localStorage.getItem("applyno");
      // this.baohanno = localStorage.getItem("baohanno");
      // this.bhproces();
    },
    async ding() {
      var that = this;
      var apps = this.applyno;
      this.timers = setInterval(async function () {
        that.bhproces();
        if (that.ztype == 1 && that.billstatus == 2) {
          that.$once("hook:beforeDestroy", () => {
            clearInterval(that.timers);
          });
        }
        // if(that.billstatus==1){
        //   that.dian = false;
        // that.tongbus = "已发送";
        // return;
        // }
      }, 1000);
    },
    async companybhlist() {
      var cion = this.baohanno;
      const { data } = await companybhlist(cion);
      // console.log(data);
    },
    yhuoqu() {
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = this.wenname.mingwenfile;
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
      // console.log("明文预览");
    },
    async bhproces() {
      // console.log(132);
      var that = this;
      var cion = this.applyno;
      const { data } = await bhprocess(cion); //获取状态
      // console.log(data);
      // "ztype=>0:密文，1:等待还原，2:还原完成;billstatus=>0:未领取,1:申请中,2:已发放"
      var cd = data.data.billstatus; //开票状态
      // var zt=null
      this.wenname = data.data.filepath;
      var vvc = data.data.mfilepath;
      if (data.data.mfilepath !== null) {
        var bbc = vvc.split("/");
        this.mwenname = bbc[4];
        this.mfilepath = this.epath + data.data.mfilepath; //明文
      }

      this.wenname = this.wenname.split("/")[4];
      this.filepath = this.epath + data.data.filepath; //pdf
      var mmfilepath = this.epath + data.data.mfilepath; //明文
      this.mfile = data.data.mfilepath;
      this.panduan = data.data.mfilepath;
      this.ztype = data.data.ztype; //保函
      if (this.ztype === 0) {
        this.namses = "等待开标";
        this.mingwen = true;
      }
      if (this.ztype === 1) {
        this.namses = "获取";
        this.mingwen = true;
      }
      if (this.ztype === 2) {
        this.namses = "下载";
        this.smingwen = true;
        this.mingwen = true;
        this.pand();
      }

      if (cd === null || cd === 0) {
        this.dian = true;
        // this.entryUserInfo();
        return;
      }
      if (cd === 1) {
        this.dian = false;
      }
      if (cd === 2) {
        this.dian = false;
        this.tongbus = "已发送";
        return;
      }
    },
    pand() {
      if (this.mfile == null) {
        this.namses = "获取";
        this.mingwen = true;
      } else {
        console.log(123);
        this.namses = "下载";
        this.mingwen = true;
      }
    },
    async huoqu() {
      if (this.namses == "等待开标") {
        this.$alert("等待开标，请稍后。", "提示", {
          confirmButtonText: "确定",
          customClass: "messageasd",
          type: "warning",
          callback: (action) => {
            window.location.reload();
            // this.invoicenoti("app");
            // this.$router.push({
            //   name: "public",
            //   params: {},
            // });
          },
        });
        return;
      }
      if (this.namses == "下载") {
        let url = this.mfilepath;
        var bbc = {
          applyno: this.applyno,
          type: 1,
        };
        const { data } = await snfiledown(bbc);
        this.mingpdf(data.data);
        //       download(
        //      url
        // );
        // console.log(url);
        // let link = document.createElement("a");
        // link.style.display = "none";
        // link.target = "_blank";
        // link.href = url;
        // link.setAttribute("download", ".pdf");
        // // +'.pdf' 通过不同的后缀名下载不同的文件
        // //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
        // document.body.appendChild(link);
        // link.click();
        return;
      } else {
        // this.erci=true;
        this.mingwen = false;
        // this.bhprocess();
        this.entryUserInfo();
      }
    },
    myinvoice() {
      var bbc = this.applyno;
      this.dian = false;
      var that = this;
      this.tishi = true;
      // console.log(132);
      //  setTimeout(function(){
      //     that.bbca()   // 关闭窗口
      //     }, 2000);
      that.$once("hook:beforeDestroy", () => {
        clearInterval(that.timer);
      });
      this.$router.push({
        name: "myinvoice",
        params: {
          bbc,
        },
      });
    },

    entryUserInfo() {
      this.quan = true;

      var that = this;

      for (let i = 0; i < 5; i++) {
        this.timer = setTimeout(
          function () {
            that.nextx(i);
          },
          i * 6000,
          i
        );
      }
      // var timename = setTimeout(function(){that.bhproces()},3000);
    },
    async nextx(i) {
      var bbc = this.unify_code;
      var cion = this.applyno;
      var tijiao = {
        applyno: cion,
        type: 2,
      };
      var that = this;
      console.log("i", i);
      if (i == 4) {
        // this.bhproces()
        // this.timer = null;
        this.mingwen = true;
        return;
      }
      if (i == 0) {
        const { data } = await createcontract(tijiao);
        // console.log(data);
        var bbc = 5;
        if (data.length == 0) {
          for (let i = 0; i <= 4; i++) {
            // console.log(i);
            setTimeout(
              function () {
                bbc--;
                that.baskdj = "加载中：" + bbc + "s";
              },
              i * 1000,
              i
            );
          }
        } else {
          // console.log(2);
          this.baskdj = "生成保函模板中...";
        }
        return;
      }
      if (i == 1) {
        // this.next1();
        const { data } = await filesign(tijiao);
        var bbc = 5;
        if (data.length == 0) {
          for (let i = 0; i <= 4; i++) {
            // console.log(i);
            setTimeout(
              function () {
                bbc--;
                that.baskdj = "加载中：" + bbc + "s..";
              },
              i * 1000,
              i
            );
          }
        } else {
          // console.log(2);
          this.baskdj = "保函签章中...";
        }

        return;
      }
      if (i == 2) {
        const { data } = await bhfiledown(tijiao);
        console.log(data);
        var bbc = 5;
        this.baskdj = "保函下载中...";
        return;
      }
      if (i == 3) {
        console.log("步骤三");

        var tong = this.applyno;
        const { data } = await restorenotice(tong);
        // console.log(data);
        this.bhproces();
        //  window.clearTimeout(this.timer);
        return;
      }
    },
    yxiazai() {
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = this.wenname.mingwenfile + "";
      // link.href = this.epath + this.wenname.mingwenfile + "";
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
      // console.log("密文预览");
    },
    async xiazai() {
      var bbc = {
        applyNumber: sessionStorage.getItem("apply_number"),
        gtype: sessionStorage.getItem("nametype"),
      };
      // http://localhost:9081/#/BidSecurity/puBlic
      snfiledown(bbc).then((res) => {
        console.log(res, "测试下载");
        this.xiazpdf(res.data.data);
      });

      return;
      let url = this.filepath; //  download(url)
      var bbc = {
        applyno: this.applyno,
        type: 0,
      };
      // http://localhost:9081/#/BidSecurity/puBlic
      const { data } = await snfiledown(bbc);
      this.xiazpdf(data.data);
    },
    dataURLtoBlob(dataurl) {
      var bstr = atob(dataurl);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "pdf" });
    },
    xiazpdf(e) {
      var that = this;
      // res.data   就是后台返回的base64的文件流
      let URL = this.dataURLtoBlob(e);
      console.log(URL, "base64的文件流");
      var reader = new FileReader();
      reader.readAsDataURL(URL);
      reader.onload = function (e) {
        console.log(e, that.wenname, "文件");
        // 兼容IE
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(e.target.result.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);

          window.navigator.msSaveOrOpenBlob(blob, that.wenname);
        } else {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement("a");
          a.download = "";
          // a.download = that.wenname;
          // a.setAttribute("download", ".pdf");
          let aa = e.target.result.replace(/^.*,/, "");
          a.href = "data:application/pdf;base64," + aa;
          a.setAttribute("id", "export");
          // document.getElementById("purchaseManage").append(a); // 修复firefox中无法触发click
          a.click();
          document.getElementById("export").remove();
        }
      };
    },
    mingpdf(e) {
      var that = this;
      // res.data   就是后台返回的base64的 文件流
      let URL = this.dataURLtoBlob(e);
      var reader = new FileReader();
      reader.readAsDataURL(URL);
      reader.onload = function (e) {
        // 兼容IE
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(e.target.result.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);

          window.navigator.msSaveOrOpenBlob(blob, that.mwenname);
        } else {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement("a");
          a.download = that.mwenname;
          a.href = e.target.result;
          a.setAttribute("id", "export");
          document.getElementById("purchaseManage").append(a); // 修复firefox中无法触发click
          a.click();
          document.getElementById("export").remove();
        }
      };
    },
    tuibao() {
      var bbc = this.baohanno;
      this.$router.push({
        name: "mycompany",
        params: {
          bbc,
        },
      });
    },

    bbca() {
      this.dians = false;
      this.tishi = false;
      this.xianshi = false;
      this.huany = true;
    },
    myinvoices() {
      this.dians = true;
      this.huanyaun = true;
      this.xianshi = false;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style>
.el-icon-loading:before {
  content: "\E6CF";
  font-size: 40px;
}
</style>
<style scoped>
html {
  width: 100vw;
}
::v-deep.el-dialog.ajhcjahsd {
  width: 16.6875rem !important;
}
.quan {
  /* background: rgb(128, 128, 128, 1); */
  position: fixed;
  top: -10rem;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kuaqu {
  margin-right: -100px;
}
.cdion-2 {
  position: relative;
}
.cdion-3 {
  position: absolute;
  font-size: 0.75rem;
  top: -1.5625rem;
  left: 0.5625rem;
}
.imgasd {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -0.3125rem;
}
.cion-fe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app {
  /* padding: 0 20%; */
}
::v-deep.el-steps--vertical {
  height: 80%;
}
.el-icon-loading {
  font-size: 20px;
}
.cion-bu {
  margin-top: 80px;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 200px;
  border-radius: 0.6875rem;
  background: #069cff;
  color: #fff;
}
.cion-bu1 {
  margin-top: 80px;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 200px;
}
.felx {
  display: flex;
}
.felx-1 {
  padding: 0 5px;
  height: 80px;
  display: flex;
  line-height: 128px;
  font-size: 30px;

  /* align-items:center; */
  color: rgb(170, 167, 167);
}
.felx-2 {
  padding: 0 5px;
  height: 80px;
  display: flex;
  line-height: 128px;
  font-size: 30px;
  font-weight: 900;
  /* align-items:center; */
  color: #069cff;
}
.yanse {
  /* padding-left: .1875rem; */
  padding-top: 3.2px;
  /* width: 24.2px; */
  height: 24.2px;
  /* color: #0a308f; */
}
.yanse1 {
  margin-top: 0.1875rem;
  width: 40.2px;
  height: 40.2px;
}
.cdion-txt {
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
}
.dion {
  line-height: 85px;
  font-size: 15px;
  padding: 0px 0.3125rem;
}
.a-imgs {
  padding-top: 22.4px;
  width: 24.2px;
  height: 24.2px;
}
.namei {
  margin-top: 10px;
  height: 20%;
  margin-left: 70%;

  /* height: 100%;
    margin-left: 70%; */
}
/* /deep/ .el-step__icon.is-icon{
    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
    w
} */
.app-xt {
  padding: 0 8%;
  height: 50vh;
}
.cdion-1 {
  width: 48px;
  height: 48px;
  font-size: 1.9375rem;
  text-align: center;
  line-height: 48px;
  color: #fff;
  background: #069cff;
  border: 0.125rem solid #069cff;
  margin-bottom: 20px;
  border-radius: 320px;
  /* background-image:url("../../../src/assets/imges/1fff.png"); */
  /* background-size: 100%,100%; */
}
.cdion-2 {
  width: 48px;
  height: 48px;
  font-size: 1.9375rem;
  text-align: center;
  line-height: 48px;
  border: 0.125rem solid #f6f7f8;
  color: #fff;
  background: #f6f7f8;
  margin-bottom: 20px;
  border-radius: 320px;
}
.b-bbc {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.indec {
  display: inline-block;
  width: 420px;
  padding: 50px;
  margin-top: -15%;
  height: 35%;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 18px;
  box-shadow: 0 2px 12px 0rgba (0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-bottom: 30px;

  /* display: flex;
  flex-direction: column;
    justify-content: space-between; */
}
.name {
  margin-bottom: 20px;
}
.input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.name-jin {
  width: 100%;
  height: 100%;
  background: #dedede;
}
.uppder {
  padding-right: 12px;
}
.input-flex {
  display: flex;
  margin-top: 10px;
}
.input-1 {
  width: 200px !important;
  width: 113px;
  /* height: 20px !important; */
}
.app-h {
  padding-left: 1.6875rem;
  width: 100%;
  height: 2.6875rem;
  line-height: 2.6875rem;
  background: #1890ff;
  font-size: 1.0625rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
::v-deep .el-input__inner {
  margin-left: 14px !important;
  height: 27px !important;
}

.text {
  font-size: 14px;
}

.item {
  padding: 8px 0;
}

.box-card {
  width: 480px;
}
.flex-txt {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ff0101;
}
.flex-txt1 {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 100px;
  text-align: right;
}
.abc {
  padding-left: 24px;
}
.app-a {
  display: flex;
  margin-top: 1.75rem;
  position: relative;
}
.a-left {
  width: 50%;
  height: 3.0625rem;
  display: flex;
  line-height: 3.125rem;
  align-content: center;
  justify-content: center;
  color: #069cff !important;
  /* background: #cdebff; */
  border: 0.0625rem solid #069cff;
  /* border-right: 0; */
  /* border-radius: 0.5625rem 0rem 0rem 0.5625rem; */
  font-size: 17px !important;
  font-family: Microsoft YaHei;
  font-weight: 400 !important;
  color: #ffffff;
}
.a-img {
  padding-top: 0.85rem;
  padding-right: 0.9375rem;
  width: 1.25rem;
  height: 1.25rem;
}
.aa-img {
  position: absolute;
  height: 48.96px;
  margin-top: 0.0625rem;
  padding: 0;
  left: 45%;
}
.a-imgs {
}
.a-right {
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 3.125rem;
  width: 50%;
  height: 3.0625rem;
  margin-top: 1px;

  background: #069cff;
  /* border-radius: 0.4375rem; */
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 550;
  color: #ffffff;
}
.app-b {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 2.8125rem;
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding: 0 30%;
  /* align-content: space-around;
  justify-content: space-between; */
}
.app-c {
  width: 100%;
  margin-top: 1.875rem;
}
.wohi-txt {
  font-size: 0.75rem;
  padding-left: 0.75rem;
}
.app-b2 {
  display: flex;
  line-height: 1.5rem;
  font-size: 0.8125rem;
  width: 48%;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 1.625rem;
}
.b-txt {
  width: 18.5rem;
  height: 1.5rem;
  flex: 1;
  background: #f3f3f3;
  border: 0.0625rem solid #dedede;
  padding-left: 0.375rem;
  line-height: 1.5rem;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.c-img {
  width: 30%;
  height: 100%;
}
.c-txt {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.txt-1 {
  font-size: 0.8125rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-2 {
  margin-top: 1.0625rem;
  font-size: 0.75rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-3 {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-4 {
  margin-top: 0.9375rem;
  font-size: 0.75rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  display: flex;
}
.c-div {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
}
.butt {
  width: 100%;
  display: flex;
  justify-content: center;
}
.button-i {
  margin-top: 3rem;
  width: 20%;
  height: 5.5%;
  padding: 0.3125rem 0;
  line-height: 1.875rem;
  border-radius: 1.25rem;
  background: #069cff;
  text-align: center;
  font-size: 0.75rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fefefe;
}
/* 上传 */
</style>
<style scoped>
html {
  width: 100vw;
}
.app {
  /* padding: 0 20%; */
}
.pdf {
  width: 50px;
  height: 50px;
}
.itm {
  margin-top: 1.1875rem;
}
.app-xt {
  padding: 0 8%;
}
.b-bbc {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.butt-1 {
  margin-top: 0.625rem;
  margin-bottom: 0.9375rem;
}
.butt-2 {
  /* margin-top: 5.625rem; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}
.kuang-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
.kuang-2 {
  width: 4.125rem;
  height: 2.0375rem;
  line-height: 1.375rem;
  text-align: center;

  /* border-radius: 20px; */
  background: #069cff;
  border: 0.0625rem solid #069cff;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding: 0.3125rem 0.5125rem;
  color: #fff;
}
.input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uppder {
  padding-right: 0.75rem;
}
.input-flex {
  display: flex;
  margin-top: 0.625rem;
}
.input-1 {
  width: 12.5rem !important;
  width: 7.0625rem;
  /* height: 1.25rem !important; */
}
.public-kuang {
  margin-top: 3.125rem;
  width: 750px;
  height: 160px;
  padding: 1.2125rem 1.25rem;

  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
  background: #ffffff;
  box-shadow: 0rem 0rem 0.1875rem 0rem rgba(0, 0, 0, 0.15);
}
.public-kuangs {
  /* margin-top: 3.125rem; */
  width: 399px;
  height: 58px;
  padding: 0.3125rem 1.25rem;

  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  box-shadow: 0rem 0rem 0.1875rem 0rem rgba(0, 0, 0, 0.15);
}
.public-ku {
  margin-top: 1.375rem;
  width: 443.8px;
  height: 250px;
  margin-bottom: 1.25rem;
}
.app-h {
  padding-left: 27px;
  /* width: 100%; */
  height: 43px;
  line-height: 43px;
  background: #1890ff;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.el-input__inner {
  margin-left: 0.875rem !important;

  height: 1.6875rem !important;
}

.text {
  font-size: 1rem;
}

.item {
  padding: 0.5rem 0;
}

.box-card {
  width: 30rem;
}
.flex-txt {
  font-size: 0.875rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ff0101;
}
.flex-txt1 {
  font-size: 0.875rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 6.25rem;
  text-align: right;
}
.abc {
  padding-left: 1.5rem;
}
.app-a {
  display: flex;
  margin-top: 28px;
  position: relative;
}
.a-left {
  width: 50%;
  height: 49px;
  display: flex;
  line-height: 50px;
  align-content: center;
  justify-content: center;
  color: #069cff !important;
  /* background: #cdebff; */
  border: 1px solid #069cff;
  /* border-right: 0; */
  /* border-radius: 9px 0px 0px 9px; */
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.a-img {
  padding-top: 13.6px;
  padding-right: 15px;
  width: 63.6px;
  height: 63.6px;
}
.aa-img {
  position: absolute;
  height: 3.06rem;
  margin-top: 1px;
  padding: 0;
  left: 45%;
}
.a-right {
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 50px;
  width: 50%;
  /* margin-top: 1px; */
  height: 49px;
  margin-top: 0.0625rem;
  border: 1px solid #069cff;
  background: #069cff;

  /* border-radius: 7px; */
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 400 !important;
  color: #ffffff;
}
.app-b {
  /* margin-top: 10px; */
  font-size: 0.95rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 0px !important;
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding: 0 30%;
  /* align-content: space-around;
  justify-content: space-between; */
}
.app-c {
  width: 100%;
  margin-top: 30px;
}
.app-b2 {
  display: flex;
  line-height: 24px;
  font-size: 13px;
  width: 48%;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 26px;
}
.b-txt {
  width: 296px;
  height: 24px;
  flex: 1;
  background: #f3f3f3;
  border: 1px solid #dedede;
  padding-left: 6px;
  line-height: 24px;
  font-size: 0.8125rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.c-img {
  width: 30%;
  height: 100%;
}
.c-txt {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.txt-1 {
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-2 {
  margin-top: 17px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-3 {
  margin-top: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-4 {
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  display: flex;
}
.c-div {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
}
.butt {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  /* flex-direction:column; */
}
.button-ii {
  margin-top: 80px;
  width: 160px;
  height: 5.5%;
  padding: 10px 0;
  line-height: 1.275rem;
  /* border-radius: 8px; */
  border: 0.0625rem solid #069cff;
  text-align: center;
  background: #069cff;
  font-size: 1.275rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
}
.butt-ii {
  width: 20%;
  height: 5.5%;
  border-radius: 20px;
  border: 0.0625rem solid #069cff;
  text-align: center;
  background: #069cff;
  font-size: 0.875rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
}
.sa-img {
  padding-top: 13.6px;
  padding-right: 15px;
  width: 20px;
  height: 20px;
}
/* 上传 */
</style>
<style>
.messageasd {
  width: 267px !important;
  margin-top: -15.875rem;
}
</style>
